<template>
  <div>
    <vxe-toolbar :custom="{immediate:true}">
      <template v-slot:buttons>
        <el-button type="primary" @click="importHandle()">Excel导入</el-button>
        <el-button type="warning" @click="sqlHandle()">SQL提取</el-button>
      </template>
      <template v-slot:tools>
        <el-button icon="el-icon-refresh" @click="getDataList()" circle></el-button>
      </template>
    </vxe-toolbar>
    <div class="aui-card-list-body-table">
      <!-- :height="this.tableHeight" -->
      <vxe-table ref="xTable" class="vxe-table-element" auto-resize :sort-config="{trigger:'cell'}" @sort-change="sortChange" @select-change="dataListSelectionChangeHandleVex" @select-all="dataListSelectionAllChangeHandleVex" :data="dataList" :height="this.tableHeight">
        <vxe-table-column type="seq" align="center" width="60" fixed="left"></vxe-table-column>
        <vxe-table-column field="f1" title="字段1" width="160">
        </vxe-table-column>
        <vxe-table-column field="f2" title="字段2" width="160">
        </vxe-table-column>
        <vxe-table-column field="f3" title="字段3" width="160">
        </vxe-table-column>
        <vxe-table-column field="f4" title="字段4" width="160">
        </vxe-table-column>
        <vxe-table-column field="f5" title="字段5" width="160">
        </vxe-table-column>
        <vxe-table-column field="f6" title="字段6" width="160">
        </vxe-table-column>
        <vxe-table-column field="f7" title="字段7" width="160">
        </vxe-table-column>
        <vxe-table-column field="f8" title="字段8" width="160">
        </vxe-table-column>
        <vxe-table-column field="f9" title="字段9" width="160">
        </vxe-table-column>
        <vxe-table-column field="f10" title="字段10" width="160">
        </vxe-table-column>
        <vxe-table-column field="f11" title="字段11" width="160">
        </vxe-table-column>
        <vxe-table-column field="f12" title="字段12" width="160">
        </vxe-table-column>
        <vxe-table-column field="f13" title="字段13" width="160">
        </vxe-table-column>
        <vxe-table-column field="f14" title="字段14" width="160">
        </vxe-table-column>
        <vxe-table-column field="f15" title="字段15" width="160">
        </vxe-table-column>
        <vxe-table-column field="f16" title="字段16" width="160">
        </vxe-table-column>
        <vxe-table-column field="f17" title="字段17" width="160">
        </vxe-table-column>
        <vxe-table-column field="f18" title="字段18" width="160">
        </vxe-table-column>
        <vxe-table-column field="f19" title="字段19" width="160">
        </vxe-table-column>
        <vxe-table-column field="f20" title="字段20" width="160">
        </vxe-table-column>
        <vxe-table-column title="handle" width="120" show-overflow="false" fixed="right" align="center">
          <template slot-scope="scope">
            <!-- <el-button v-if="$hasPermission('cpn:cpnData1:update')" type="text" size="small" icon="el-icon-edit" @click="addOrUpdateHandle(scope.row)">{{ $t('update') }}</el-button> -->
            <el-button type="text" size="small" icon="el-icon-delete" @click="deleteHandle(scope.row.id)">{{ $t('delete') }}</el-button>
          </template>
        </vxe-table-column>
      </vxe-table>
      <el-pagination :current-page="page" :page-sizes="pageSizes" :page-size="limit" :total="total" layout="total, sizes, prev, pager, next, jumper" @size-change="pageSizeChangeHandle" @current-change="pageCurrentChangeHandle">
      </el-pagination>
    </div>
    <CpnDataImport v-if="importVisible" ref="cpnDataImport" @setDataList="getDataList"></CpnDataImport>
    <CpnDataSql v-if="sqlVisible" ref="cpnDataSql" @setDataList="getDataList"></CpnDataSql>

  </div>
</template>
<script>
import mixinViewModule from '@/mixins/view-module'
import CpnDataImport from './cpnData2-import'
import CpnDataSql from './cpnData2-sql'

// import AddOrUpdate from './cpnData1-add-or-update'
export default {
  mixins: [mixinViewModule],
  data () {
    return {
      importVisible: false,
      sqlVisible: false,
      mixinViewModuleOptions: {
        activatedIsNeed: false,
        getDataListURL: '/cpn/cpnData2/page',
        getDataListIsPage: true,
        deleteURL: '/cpn/cpnData2',
        deleteIsBatch: true
      },
      tableHeightHold: 458,
      // headLock: true,
      dataForm: {
        themeId: ''
      },
      columns: []
    }
  },
  created () {
    this.$nextTick(() => {
      if (this.$route.params.themeId) {
        this.dataForm.themeId = this.$route.params.themeId
        this.getDataList()
        this.columns = this.$refs.xTable.getColumns()
      }
    })
  },
  watch: {
    'dataList': function (val) {
      this.$emit('dataUpdate', val)
    },
    'fieldDatas': function (val) {
      if (this.dataList && this.dataList.length) {
        this.$nextTick(() => {
          this.columns.forEach(column => {
            if (column.property && column.property.substr(0, 1) === 'f') {
              // console.debug(3)
              let visible = false
              for (const field of val) {
                if (field.value === column.property) {
                  visible = true
                  continue
                }
              }
              column.visible = visible
            }
          })
          if (this.$refs.xTable) {
            this.$refs.xTable.refreshColumn()
          }
        })
      }
    }

  },
  components: {
    CpnDataImport,
    CpnDataSql
  },
  computed: {
    fieldDatas () {
      let fieldDatas = []
      let l = this.getFieldLength(this.dataList)
      for (let index = 0; index < l; index++) {
        let field = {
          label: '字段' + (index + 1),
          value: 'f' + (index + 1)
        }
        fieldDatas.push(field)
      }
      return fieldDatas
    }
  },
  methods: {
    // 导入
    importHandle () {
      this.importVisible = true
      this.$nextTick(() => {
        this.$refs.cpnDataImport.themeId = this.dataForm.themeId
        this.$refs.cpnDataImport.init()
      })
    },
    sqlHandle () {
      this.sqlVisible = true
      this.$nextTick(() => {
        this.$refs.cpnDataSql.dataForm.id = this.dataForm.themeId
        this.$refs.cpnDataSql.init()
      })
    },
    getFieldLength (datas) {
      let fMaxField = 0
      for (const data of datas) {
        let fsize = 0
        for (let i in data) {
          // console.debug('1', i)
          if (i.substr(0, 1) !== 'f') {
            continue
          }
          if (data[i]) {
            fsize++
          }
        }
        if (fsize > fMaxField) {
          fMaxField = fsize
        }
      }
      return fMaxField
    }
  }
}
</script>
